<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>display</title>

        <link rel="stylesheet" href="cells.css">

        <style type="text/css">
            h4 { text-align: center ; }
            .odd { background-color: #dedede ; }
            .even { background-color: #ffff00 ; }

            .wrapper { border: 1px solid blue ; margin: 25px auto; width: 800px ; }
            .wrapper>* { height: 50px ; }
        </style>
    </head>
    <body>

        <h4>将整行平均拆分为两等份</h4>
        <div class="wrapper first row">
            <span class="odd cell-12-6">落霞与孤鹜齐飞</span>
            <span class="even cell-12-6">秋水共长天一色</span>
        </div>

        <h4>将整行平均拆分为三等份</h4>
        <div class="wrapper second row">
            <span class="odd cell-12-4"></span>
            <span class="even cell-12-4"></span>
            <span class="odd cell-12-4"></span>
        </div>

        <h4>将整行平均拆分为四等份</h4>
        <div class="wrapper third row">
            <div class="odd cell-12-3"></div>
            <div class="even cell-12-3"></div>
            <div class="odd cell-12-3"></div>
            <div class="even cell-12-3"></div>
        </div>

        <h4>将整行平均拆分为十二等份</h4>
        <div class="wrapper fourth row">
            <div class="cell-12-1 odd"></div>
            <div class="cell-12-1 even"></div>
            <div class="cell-12-1 odd"></div>
            <div class="cell-12-1 even"></div>
            <div class="cell-12-1 odd"></div>
            <div class="cell-12-1 even"></div>
            <div class="cell-12-1 odd"></div>
            <div class="cell-12-1 even"></div>
            <div class="cell-12-1 odd"></div>
            <div class="cell-12-1 even"></div>
            <div class="cell-12-1 odd"></div>
            <div class="cell-12-1 even"></div>
        </div>

        <h4>将整行平均拆分为五等份</h4>
        <div class="wrapper fourth row">
            <div class="cell-5-1 odd"></div>
            <div class="cell-5-1 even"></div>
            <div class="cell-5-1 odd"></div>
            <div class="cell-5-1 even"></div>
            <div class="cell-5-1 odd"></div>
        </div>

        <hr>

        <div class="wrapper row fifth" style="width:100%">
            <span class="odd cell-12-10"></span>
            <span class="even cell-12-2"></span>
        </div>
        
    </body>
</html>